<template>
	<div>
		<el-row :gutter="20">
			<div class="padding10">
				<el-form :inline="true" :model="queryForm" @submit.native.prevent @keyup.enter.native="queryList">
					<el-form-item>
						<el-input prefix-icon="el-icon-search" v-model="queryForm.memberName" autocomplete="off" placeholder="请输入会员名称" clearable></el-input>
					</el-form-item>

					<el-form-item>
						<el-input prefix-icon="el-icon-search" v-model="queryForm.courseName" autocomplete="off" placeholder="请输入课程名称" clearable></el-input>
					</el-form-item>

					<el-form-item v-show="collapse.flag">
						<fortress-select v-model="queryForm.studyStatus" :dictList="studyStatusList" placeholder="请选择学习状态" clearable filterable></fortress-select>
					</el-form-item>

					<el-form-item>
						<el-button type="primary" size="medium" icon="el-icon-search" @click="queryList({ current: 1 })">
							查询
						</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" size="medium" icon="el-icon-refresh-left" @click="resetQueryForm">重置</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="text" @click="handleCollapseState">
							{{ collapse.label }}
							<i :class="collapse.icon"></i>
						</el-button>
					</el-form-item>
				</el-form>
				<div style="float: right; padding-right: 17px">
					<!--						<i class="el-icon-download" style="margin-right: 10px; cursor: pointer" @click="handleExport"></i>-->
					<i class="el-icon-refresh" style="margin-right: 10px; cursor: pointer" @click="refresh"></i>

					<el-popover placement="bottom" width="180" trigger="click" title="列展示" popper-class="columnShows">
						<el-checkbox-group v-model="tableShowList">
							<el-checkbox v-for="item in tableList" :label="item.propName" :key="item.propName" :value="item.propName">
								{{ item.propDesc }}
							</el-checkbox>
						</el-checkbox-group>
						<i slot="reference" class="el-icon-s-operation" style="cursor: pointer"></i>
					</el-popover>
				</div>
				<!-- loading -->
				<loading :show="parentShow">
					<el-table ref="multipleTable" :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="id" border>
						<el-table-column type="selection" width="55" show-overflow-tooltip></el-table-column>
						<el-table-column v-if="$tools.isShow('memberName', tableShowList)" prop="memberName" label="会员名称" :show-overflow-tooltip="true"></el-table-column>
						<el-table-column v-if="$tools.isShow('courseName', tableShowList)" prop="courseName" label="课程名称" :show-overflow-tooltip="true"></el-table-column>
						<el-table-column v-if="$tools.isShow('studyStatus', tableShowList)" prop="totalCoursewares" label="学习进度" :show-overflow-tooltip="true">
							<template slot-scope="scope">
								{{ scope.row.totalCoursewares == scope.row.finishCoursewares ? "已完成" : "未完成" }}
							</template>
						</el-table-column>
					</el-table>
				</loading>
				<pagination :total="page.total" :current-page="page.current" :page-size="page.size" @refreshData="queryList"></pagination>
			</div>
		</el-row>
	</div>
</template>
<script>
import { memberStudyPage, studycourseDel, studycourseDelBatch, studycourseDynamicExport, leftTreeList, editRecommend, editCourseStatus } from "@/api/study/course/studycourse.js"
import { viewTableList } from "@/api/public.api.js"
import FortressPagination from "@/components/fortress-pagination.vue"
import { enumList, urlList } from "@/api/public.api.js"
export default {
	data() {
		return {
			parentShow: false,
			tableData: [],
			queryForm: {
				memberName: "",
				courseName: "",
				studyStatus: "",
			},
			page: {
				current: 1,
				size: 10,
				total: 0,
			},
			collapse: {
				icon: "el-icon-arrow-down el-icon--right",
				label: "展开",
				flag: false,
			},
			tableList: [],
			tableShowList: [],
			studyStatusList: [
				{ code: "00", name: "未完成" },
				{ code: "01", name: "已完成" },
			],
		}
	},
	components: {
		pagination: FortressPagination,
	},
	created() {
		this.initTableList()
		this.queryList()
	},
	watch: {
		leftTreeFilterText(val) {
			this.$refs.tree.filter(val)
		},
	},
	methods: {
		refresh() {
			this.tableData = []
			this.queryList({ current: 1 })
		},
		//查询表格数据
		queryList(page) {
			this.parentShow = true
			if (page) {
				this.page.current = page.current ? page.current : this.page.current
				this.page.size = page.size ? page.size : this.page.size
			}
			this.queryForm.current = this.page.current
			this.queryForm.size = this.page.size
			memberStudyPage(this.queryForm).then(resp => {
				if (resp.code == 0) {
					this.tableData = resp.data.records
					this.page.total = resp.data.total
					//查询页大于总页数，重新查询
					let cu = this.page.total % this.page.size == 0 ? parseInt(this.page.total / this.page.size) : parseInt(this.page.total / this.page.size + 1)
					if (cu > 0 && this.page.current > cu) {
						this.queryList({ current: cu })
					}
				} else {
					this.$msg({
						message: resp.msg,
						type: "error",
					})
				}
				this.parentShow = false
			})
		},

		//重置查询框
		resetQueryForm() {
			this.queryForm = {
				memberName: "",
				courseName: "",
				studyStatus: "",
			}
			this.queryList({ current: 1 })
		},
		//切换查询条件收缩框
		handleCollapseState() {
			this.collapse.flag = !this.collapse.flag
			if (this.collapse.flag) {
				this.collapse.icon = "el-icon-arrow-up el-icon--right"
				this.collapse.label = "收起"
			} else {
				this.collapse.icon = "el-icon-arrow-down el-icon--right"
				this.collapse.label = "展开"
			}
		},
		//视图表格列表初始化
		initTableList() {
			viewTableList("study_member_course").then(resp => {
				if (resp.code == 0) {
					this.tableList = resp.data
					this.tableList.forEach(item => {
						this.tableShowList.push(item.propName)
					})
				}
			})
		},

		//可见字段excel导出
		handleExport() {
			if (!this.tableShowList || this.tableShowList.length < 1) {
				this.$msg({
					message: "请选择要导出的列",
					type: "error",
				})
				return
			}
			let colNum = 1
			let headerList = []
			this.tableShowList.forEach(item => {
				let nameData = this.tableList.find(item2 => {
					return item2.propName == item
				})
				let name = ""
				if (nameData && nameData.propDesc) {
					name = nameData.propDesc
				} else {
					name = "未定义字段" + colNum++
				}
				headerList.push({ name: name, code: item })
			})
			studycourseDynamicExport({ headerList: headerList, dto: this.queryForm })
		},
	},
}
</script>
<style scoped>
.padding10 {
	padding: 10px 20px;
	background-color: #fff;
	/* max-height: 600px; */
	overflow: auto;
	border-radius: 4px;
	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
}
.tree {
	height: 600px;
	overflow: auto;
}
</style>
